<script setup>
import { reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAdminStore } from '@/stores/admin'
import { Back, User, ArrowDown } from '@element-plus/icons-vue'

const store = useAdminStore()
const router = useRouter()
const route = useRoute()

const state = reactive({
    name: '后台管理', // 默认标题
    username: store.admin?.username || '管理员', // 用户名
    hasBack: false, // 是否展示返回icon
})

// 监听路由变化更新页面标题
watch(() => route.path, (newPath) => {
    // 根据路由设置页面标题
    const titles = {
        '/': '后台首页',
        '/dashboard': '仪表板',
        '/products': '商品管理',
        '/orders': '订单管理',
        '/users': '用户管理',
        '/reports': '营销报表',
        '/settings': '系统设置'
    }
    state.name = titles[newPath] || '后台管理'
}, { immediate: true })

// 监听store中的用户信息变化
watch(() => store.admin, (newAdmin) => {
    if (newAdmin?.username) {
        state.username = newAdmin.username
    }
    if (newAdmin?.realName) {
        state.name = newAdmin.realName
    }
}, { immediate: true, deep: true })
// 退出登录
const btnLogout = () => {
    //把token设置为空
    store.saveToken('')
    //跳转登录页面
    router.push({
        path: "/login"
    })
}
//全局后置路由守卫，组件初始化的时候调用，每次路由切换后执行(to,from) 没有next函数因为已经路由切换完毕
router.afterEach((to) => {
    const { id } = to.query
    console.log("===========afterEach 的to对象=============");
    console.log(to);
    // state.name = pathMap[to.name]
    // level2 和 level3 需要展示返回icon
    console.log('to.name', to.name)
    state.hasBack = ['level2', 'level3'].includes(to.name)
    
    // 更新用户名（如果store中有数据）
    if (store.admin?.username) {
        state.username = store.admin.username
    }
    if (store.admin?.realName) {
        state.name = store.admin.realName
    }
})
// 返回方法
const back = () => {
    router.back()
}
</script>
<template>
    <div class="header">
        <div class="left">
            <el-icon class="back" v-if="state.hasBack" @click="back">
             <Back />
            </el-icon>
            <span style="font-size: 20px">{{ state.name }}</span>
        </div>
        <div class="right">
            <el-popover placement="bottom" :width="320" trigger="click" popper-class="popper-user-box">
                <template #reference>
                    <div class="author">
                        <el-icon><User /></el-icon>
                        {{ state.username || '' }}
                        <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                    </div>
                </template>
                <div class="nickname">
                    <p>登录名：{{ state.username || '' }}</p>
                    <el-tag size="small" effect="dark" class="logout" @click="btnLogout">退出</el-tag>
                </div>
            </el-popover>
        </div>
    </div>
</template>

<style scoped>
.header {
    height: 50px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.header .left .back {
    border: 1px solid #e9e9e9;
    padding: 5px;
    border-radius: 50%;
    margin-right: 5px;
    cursor: pointer;
}

.right>div>.icon {
    font-size: 18px;
    margin-right: 6px;
}

.author {
    margin-left: 10px;
    cursor: pointer;
}
</style>

<style>
.popper-user-box {
    background: url('https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png') 50% 50% no-repeat !important;
    background-size: cover !important;
    border-radius: 0 !important;
}

.popper-user-box .nickname {
    position: relative;
    color: #ffffff;
}

.popper-user-box .nickname .logout {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
</style>